import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
//import QtGraphicalEffects 1.13
import Qt5Compat.GraphicalEffects
Item {
    id:root
    property alias source: centerLoader.source
    property string title: ""
    property alias model: listView.model
    ToolBar {
        id: titleBar
        height:40
        width: parent.width
//        parent: Overlay.overlay
        background: Rectangle{color: "white"}
        RowLayout {
            anchors.fill: parent
            Button {
                id:btnMenu
                text:"☰";
                background: Rectangle{
                    color:btnMenu.pressed ? "#80ffffff" : "transparent";
                    radius:4
                }
                onClicked: {
                    drawer.visible ? drawer.close() : drawer.open()
                }
            }
            Label {
                id:titleText
                text: "Title"
                elide: Label.ElideRight
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
        }
    }

//    DropShadow{
//        anchors.fill: parent
//        radius: 18.0
////        samples: 16
//        color: "#40000000"
//        spread: 0
//        verticalOffset: 10
//        source: titleBar
//    }

    Drawer {
        id: drawer
        y: titleBar.height
        width: 0.4 * root.width
        height: root.height - titleBar.height
        closePolicy: Popup.CloseOnPressOutside
        ListView{
            id:listView
            anchors.fill: parent
            header: Rectangle{
                height: 40
                width:listView.width
                Text{
                    anchors.centerIn: parent
                    text:root.title
                    font.bold: true
                    font.family: "微软雅黑"
                    horizontalAlignment:Text.AlignHCenter
                }
            }

            delegate: ItemDelegate {
                text: title
                width: listView.width
                onClicked:{
                    console.log("clicked" + src)
                    centerLoader.source = src
                    titleText.text = title
                    drawer.close()
                }
            }
            ScrollIndicator.vertical: ScrollIndicator { }
        }
    }


    Loader{
        id: centerLoader
        anchors.top: titleBar.bottom
        anchors.left: root.left
        anchors.right: root.right
        anchors.bottom: root.bottom
    }
}
